<template>
  <section>
    <!-- <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>用户名:</span>
        <input type="text" placeholder="请输入用户名称" v-model="teaName">
        <el-button type="primary" @click="nameSearch" size="small">搜索</el-button>
      </div>
    </div> -->

    <div class="model list">
      <img :src="IMGBASE64.XIAOCHEXIANLU2X" class="pink">
      <span class="title">学科列表</span>
      <el-button type="success" class="addBtn" size="small" @click="upshow">新增</el-button>
      <div class="kong"></div>
      <el-table :data="tableData" style="100%">
          <el-table-column prop="id" label="#" align="center"></el-table-column>
          <el-table-column prop="isValid" label="状态" align="center"></el-table-column>
          <el-table-column prop="subjectId" label="学科Id" align="center"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称" align="center"></el-table-column>
          <el-table-column prop="createTime2" label="创建时间" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="updateTime2" label="修改时间" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button size="small" @click="xiugaishow(scope)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>

    <div class="up" v-show="upShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="green">
      <span class="title">新增学科</span>
      <el-button icon="el-icon-close" class="close" @click="upshow()"></el-button>
      <header>
        <span class="header-title">基本信息</span>
      </header>
      <div class="form">
        <!-- <div class="row">
          <span>学科ID:</span>
          <input type="text" class="text" v-model="">
        </div> -->
        <div class="row">
          <span>学科名称:</span>
          <input type="text" class="text" v-model="subjectName">
        </div>
        <div class="row">
          <span class="float">是否有效:</span>
          <div class="choose">
            <el-radio class="radio" v-model="radio" label="1">有效</el-radio>
            <el-radio class="radio" v-model="radio" label="2">无效</el-radio>
          </div>
        </div>
        <!-- <div class="row">
          <span>状态:</span>
          <input type="text" class="text" v-model="">
        </div> -->
      </div>
      <div class="bottom">
        <div class="right">
          <el-button type="success" @click="addData()" size="small">确定</el-button>
        </div>
      </div>
    </div>

    <div class="up" v-show="xiugai">
      <img :src="IMGBASE64.XIANGQING2X" class="green">
      <span class="title">修改</span>
      <el-button icon="el-icon-close" class="close" @click="closexiugai()"></el-button>
      <header>
        <span class="header-title">基本信息</span>
      </header>
      <div class="form">
        <!-- <div class="row">
          <span>学科ID:</span>
          <input type="text" class="text" v-model="">
        </div> -->
        <div class="row">
          <span>学科名称:</span>
          <input type="text" class="text" v-model="xiugaiForm.subjectName">
        </div>
        <div class="row">
          <span class="float">是否有效:</span>
          <div class="choose">
            <el-radio class="radio" v-model="radio" label="1">有效</el-radio>
            <el-radio class="radio" v-model="radio" label="2">无效</el-radio>
          </div>
        </div>
        <!-- <div class="row">
          <span>状态:</span>
          <input type="text" class="text" v-model="">
        </div> -->
      </div>
      <div class="bottom">
        <div class="right">
          <el-button type="success" @click="changeData()" size="small">确定</el-button>
        </div>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="anShow"></div>
    </transition>

  </section>
</template>

<script>
export default {
  data () {
    return {
      radio: '1',
      checkedCities: ['初审人员'],
      cities: ['初审人员', '初审主管', '终审人员', '终审主管'],
      player: '凹凸鳗',
      upShow: false,
      anShow: false,
      xiugai: false,
      Enline: null,
      teaName: null,
      line: null,
      lineOption: [],
      tableData: [],
      subjectName: null,
      xiugaiForm: {
        subjectName: null,
        id: null
      }
    }
  },
  methods: {
    upshow () {
      this.upShow = !this.upShow
      this.anShow = !this.anShow
      this.subjectName = null
    },
    closexiugai () {
      this.xiugai = !this.xiugai
      this.anShow = !this.anShow
    },
    xiugaishow (scope) {
      this.xiugaiForm.id = scope.row.id
      this.xiugaiForm.subjectName = scope.row.subjectName
      this.xiugai = !this.xiugai
      this.anShow = !this.anShow
      console.log(this.xiugaiForm)
    },
    append () {
      // store.append({ code: code++, label: 'testtest', children: [] }, data)
      this.upShow = true
    },
    nameSearch () {},
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolConf/subject/manage/subjectList', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].createTime2 = this.changeTime(this.tableData[i].createTime)
            this.tableData[i].updateTime2 = this.changeTime(this.tableData[i].updateTime)
            if (this.tableData[i].isValid === 1) {
              this.tableData[i].isValid = '有效'
            } else {
              this.tableData[i].isValid = '无效'
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeTime (value) {
      if (value != null) {
        var date = new Date(value)
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
      } else {
        return null
      }
    },
    addData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolConf/subject/manage/add', {subjectName: this.subjectName, isValid: this.radio}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
          this.upShow = !this.upShow
          this.anShow = !this.anShow
          this.subjectName = null
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolConf/subject/manage/update', {subjectName: this.xiugaiForm.subjectName, id: this.xiugaiForm.id, isValid: this.radio}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
          this.xiugai = !this.xiugai
          this.anShow = !this.anShow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  },
  mounted () {
    this.getTableData()
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .list{
    position: relative;
    .addBtn{
      position: absolute;
      right: 2%;
    }
  }
  .green{
    position: absolute;
    left: 24px;
    top: -25px;
  }
</style>

<style scoped>
  div[data-v-22bf8d34] ul
  {
    position: relative;
    left: 12%;
  }
  div[data-v-22bf8d34]
  {
    padding-bottom: 10px;
  }
  .el-upload--picture-card
  {
    margin-left: 9%; 
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
  .tree{
    position: relative; left: 60%;
    width: 40%;
  }
  .span{
    opacity: 0;
  }

  .up{
    width: 35%;
    position: fixed;
    top: 20%;
    left: 50%;
    margin-left: -18%;
    background: #FFF;
    padding: 20px 20px 0 20px;
    border-radius: 5px;
    z-index: 99999;
  }
  .up .img{
    position: absolute;
    left: 24px;
    top: -20px;
  }
  .up .title{
    margin-left: 90px;
  }
  .up header{
    height: 24px;
    border-bottom: 2px solid #D7D7D7;
    padding: 30px 0 10px 0;
    margin-left: 1%;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .up .header-title{
    height: 24px;
    display: inline-block;
    color: #FB7862;
    border-bottom: 2px solid #FB7862;
    padding: 0 10px 10px 10px;
    margin-left: 0;
  }
  .up .form{
    margin-left: 10%;
    margin-right: 10px;
    overflow: hidden;
  }
  .up .form ul li{
    margin-right: 8%;
    margin-bottom: 4%;
  }
  .up .form .row{
    padding-top: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .up .form .row .choose{
    margin-left: 20%
  }
  .up .form .row .text{
    border: 0;
    border-bottom: 1px solid #d7d7d7;
  }
  .up .bottom{
    border-top: 1px solid #D7D7D7;
    margin-top: 20px;
    background: #F8F8F8;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0 0 5px 5px;
  }
  .up .bottom .right{
    text-align: right;
    padding: 0 10px 0 0;
  }
  .up .el-checkbox-group{
    margin-left: 4%;
  }
</style>
